<template>
	<view class="container">
		<!-- 个人信息区 -->
		<view class="profile-section card shadow animate-slide-in">
			<view class="avatar-section">
				<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
				<text class="text-h1">个人主页</text>
				<view class="tag ">欢迎使用</view>
			</view>
			<view class="profile-stats">
				<view class="stat-item">
					<text class="text-h2">12</text>
					<text class="text-muted">课程</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item">
					<text class="text-h2">28</text>
					<text class="text-muted">笔记</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item">
					<text class="text-h2">8</text>
					<text class="text-muted">收藏</text>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="feature-list card shadow animate-slide-in" style="animation-delay: 0.1s;">
			<view class="feature-item" @click="handleFunction('note')">
				<view class="feature-icon bg-primary">
					<uni-icons type="compose" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="feature-info">
					<text class="text-h3">我的笔记</text>
					<text class="text-muted">查看所有学习笔记</text>
				</view>
				<uni-icons type="arrowright" size="18"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="feature-item" @click="handleFunction('timetable')">
				<view class="feature-icon bg-success">
					<uni-icons type="list" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="feature-info">
					<text class="text-h3">学习反馈</text>
					<text class="text-muted">查看学习进度和记录</text>
				</view>
				<uni-icons type="arrowright" size="18"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="feature-item" @click="handleFunction('download')">
				<view class="feature-icon bg-warning">
					<uni-icons type="download" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="feature-info">
					<text class="text-h3">下载</text>
					<text class="text-muted">离线学习资料管理</text>
				</view>
				<uni-icons type="arrowright" size="18"></uni-icons>
			</view>
			<view class="divider"></view>
			<view class="feature-item" @click="handleFunction('settings')">
				<view class="feature-icon bg-info">
					<uni-icons type="gear" size="24" color="#FFFFFF"></uni-icons>
				</view>
				<view class="feature-info">
					<text class="text-h3">设置</text>
					<text class="text-muted">账号与应用设置</text>
				</view>
				<uni-icons type="arrowright" size="18"></uni-icons>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section animate-slide-in" style="animation-delay: 0.2s;">
			<button class="btn btn-outline w-full" @click="backLogin">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '/static/images/default-avatar.png',
					nickname: '用户名'
				}
			}
		},
		methods: {
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/${page}/index`
				})
			},
			backLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleFunction(type) {
				switch (type) {
					case 'note':
						uni.navigateTo({
							url: '/pages/note/index'
						});
						break;
					case 'timetable':
						uni.navigateTo({
							url: '/pages/timetable/index'
						});
						break;
					case 'download':
						uni.navigateTo({
							url: '/pages/resource/index'
						});
						break;
					case 'settings':
						uni.navigateTo({
							url: '/pages/settings/index'
						});
						break;

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/theme.scss';

	.container {
		padding: 30rpx;
		background-color: #ebf5fb;
		min-height: 100vh;
	}

	.profile-section {
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			margin-bottom: 20rpx;
			border: 4rpx solid #FFFFFF;
			box-shadow: 0 4rpx 16rpx rgba(52, 152, 219, 0.2);
		}

		.text-h1 {
			margin-bottom: 16rpx;
		}

		.tag {
			font-size: 24rpx;
			padding: 8rpx 24rpx;
			background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
			color: #fff;
			border-radius: 100rpx;
		}
	}

	.profile-stats {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 30rpx;
		border-top: 2rpx solid var(--border-color);

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.text-h2 {
				margin-bottom: 8rpx;
				color: var(--primary-color);
			}

			.text-muted {
				font-size: 24rpx;
			}
		}

		.divider {
			width: 2rpx;
			height: 50rpx;
			background-color: var(--border-color);
		}
	}

	.feature-list {
		margin-bottom: 30rpx;

		.feature-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			transition: all 0.3s ease;

			&:active {
				background-color: rgba(52, 152, 219, 0.1);
				transform: translateX(4rpx);
			}
		}

		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			&.bg-primary {
				background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
			}

			&.bg-success {
				background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
			}

			&.bg-warning {
				background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
			}

			&.bg-info {
				background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
			}
		}

		.feature-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.text-h3 {
				margin-bottom: 4rpx;
			}

			.text-muted {
				font-size: 24rpx;
			}
		}

		.divider {
			height: 2rpx;
			margin: 0 30rpx;
			background-color: var(--border-color);
		}
	}

	.logout-section {
		margin-top: 60rpx;
	}

	.w-full {
		width: 100%;
	}

	.btn-outline {
		background: transparent;
		border: 2rpx solid #3498db;
		color: #3498db;
		border-radius: var(--radius);
		font-size: var(--font-size);
		font-weight: 500;
		transition: all 0.3s ease;

		&:active {
			background: rgba(52, 152, 219, 0.1);
			transform: translateY(2rpx);
		}
	}
</style>